<template>
  <div id="driver">
    <div ref="search" class="search vux-1px-t">
      <div class="search-input">
        <i class="icon icon-iconmapsearch" style="display: block;float:left;"></i>
        <input type="text" class="weui-input" @input="handleSearch" v-model="keyword" placeholder="可输入名称/手机搜索" style="height: 0.5rem; margin-top: 0.1rem; margin-left: 0.15rem; line-height: 0.5rem;font-size: 0.26rem; width: 3rem; float:left; border: 0px none; background: none;">
      </div>
      <i @click="$router.push({path: '/toCollection', query: {service_id: serverID}})" class="icon icon-ziyuan2" style="font-size: 0.46rem; display: inline-block; width: 1rem; color: #888; float: right; text-align: right;"></i>
    </div>
    <div ref="pensonbox" style="margin-top: 0.1rem; position: relative;">
      <scroller
        :on-refresh="refresh"
        :on-infinite="infinite"
        :noDataText="dataObj.length? '我已经到底了~~': nullMsg"
        style="padding-top: 0rem;">
        <div class="penson" v-for="(item, index) in dataObj" :key="index" v-if="dataObj.length > 0">
          <div class="headimg" @click="toDriver(item.bid)"><img :src="item.face? item.face: '../../../static/img/noheadpic.png'" /></div>
          <div class="flex-auto" @click="toDriver(item.bid)">
            <p class="flex flex-middle">
              <span class="overflowtext" style="font-size: 0.3rem;">{{item.nick_name}}</span>
              <i class="icon icon-gerenrenzheng"></i>
            </p>
            <div class="flex flex-middle">
              <rater disabled v-model="item.comment_score" active-color="#ff9800"></rater>
              <span style="color: #ff9800; margin-left: 0.15rem; font-size: 0.26rem;">{{item.comment_score}}<span style="font-size: 0.24rem;">分</span></span>
            </div>
            <div>
              {{item.car_num}}
              {{ item.car_name}}
              {{ item.car_length}}
              {{ item.car_width}}
            </div>
          </div>
          <div class="other text-orange">
            <a :href="'tel:' + item.phone" class="text-orange"><i class="icon icon-phone"></i></a>
            <i class="icon icon-heart" @click="collection(index, item.bid)"></i>
          </div>
        </div>
      </scroller>

      <div v-if="dataObj.length == 0 && count != 0 && !isLoading" class="null">
        <img src="../../../static/img/nullshoucang.png" style="width: 3.5rem; height: 2.25rem;">
        <p style="margin-top: 0.5rem;">没有相关司机数据</p>
        <div style="width: 2rem;margin: 0 auto; margin-top: 0.3rem;">
          <x-button type="primary" class="out-line" mini action-type="button" @click.native="$router.push({name: 'toCollection', query: {service_id: serverID}})">去收藏</x-button>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  import { TransferDom, Rater, LoadMore } from 'vux'
  import { trim } from '../../libs/until'
  import { setObjectVal, removeByValue } from '../../libs/fn'
  export default{
    name: 'collection',
    props: ['type', 'collectionData','load'],
    components: {
      Rater,
      LoadMore
    },
    computed: {
      serverID() {
        return this.$store.state.userInfo.service_id || 0
      }
    },
    mounted() {
      const bodyHeight = document.documentElement.clientHeight
      const searchHeight = this.$refs['search'].offsetHeight
      const pensonHeight = bodyHeight - searchHeight
      this.$refs['pensonbox'].style.height = pensonHeight + 'px'
    },
    created() {
      this.getData()
    },
    data() {
      return {
        count: 0,
        dataObj: [],
        isLoading: false,
        checkall: false,
        is_collection: false,
        pages: 1,
        page: 1,
        keyword: '',
        end: false,
        push_users: [],
        lar: null,
        code: 0,
        nullMsg: '加载数据中...',
        timeOut: 0
      }
    },
    methods: {
      toDriver(uid) {
        if(uid) {
          this.$router.push({path: '/driverPage', query: {id: uid, service: this.serverID}})
        }
      },
      infinite(done) {
        if(this.page >= this.pages) {
          this.end = true
          done(true)
          return
        }
        if(!this.isLoading) {
          this.isLoading = true
          this.page ++
          this.getData(done)
        }

      },
      refresh(done) {
        this.pages = 0
        this.end = false
        this.page = 1
        setTimeout(() => {
          this.nullMsg = ''
          this.dataObj = []
          this.getData(done(), 'refresh')
        }, 700)

      },

      handleSearch() {
        if(this.code != 1){
          return
        }
        const timeInterval = 500
        const now = new Date().getTime()
        if(now - this.timeOut < timeInterval){
          clearTimeout(this.lar)
        }
        this.timeOut = now
        this.lar = setTimeout(() => {
          this.page = 1
          this.pages = 1
          this.dataObj = []
          this.getData(() => {})
        }, timeInterval)
      },
      getData(done = () => {}) {
        this.isLoading = true
        this.keyword = trim(this.keyword)
        this.checkall = false
        this.$http.post($config.host + '/api/Driver/lists', qs.stringify({
          uid: this.$store.state.userInfo.uid,
          service_id: this.serverID,
          page: this.page,
          client: $config.client_type,
          device: $config.device_type,
          token: this.$store.state.userInfo.token,
          keyword: this.keyword,
          pagesize: 10
        })).then((res) => {
          const {code, data, msg} = res.data
          this.isLoading = false
          this.nullMsg = ''
          if(code == 1 && data) {
            this.code = code
            this.pages = data.pages
            let newData = []
            data.data.map(item => {
              if(this.push_users.indexOf(item.bid) > -1){
                item.is_check = 1
              }
              newData.push(item)
            })
            this.dataObj = this.dataObj.concat(newData)
          }
          this.count++
        }).catch((err) => {
          this.isLoading = false
          this.is_collection = false
          this.$vux.toast.text($config.errMsg, 'middle')
        })
      },
      //收藏
      collection(index, bid){
        //防止异步时 重复提交
        if(this.is_collection) {
          return
        }
        this.is_collection = true
        this.$vux.loading.show({
          text: '取消收藏中'
        })
        this.$http.post($config.host + '/api/Driver/del', qs.stringify({
          uid: this.$store.state.userInfo.uid,
          bid,
          service_id: this.serverID,
          client: $config.client_type,
          device: $config.device_type,
          token: this.$store.state.userInfo.token
        })).then((res) => {
          this.$vux.loading.hide()
          const {code} = res.data
          if(code == '1') {
            this.dataObj.splice(index, 1)
            //取消收藏时看该bid是否被选中，选中就清除
            const pushIndex = this.push_users.indexOf(bid)
            if(pushIndex > -1){
              this.push_users.splice(pushIndex, 1)
              //取消收藏时传bid到父组件去检查，有就删除
              this.$emit('on-clear', bid)
            }
          }
          this.is_collection = false
          if(this.dataObj.length == 0){
            this.checkall = false
          }
        }).catch((err) => {
          this.is_collection = false
          this.$vux.toast.text($config.errMsg, 'middle')
        })
      }
    }
  }
</script>
<style scoped>
  .fiexd-btn{
    height: 1.1rem;
    background: #fff;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index:88;
    padding: 0.1rem 0.2rem;
  }
  .filter-yx, .filter-yx>div{
    background: #fff;
    height: 1rem;
    line-height: 1rem;
  }
  .filter-yx .icon{
    font-size: 0.22rem;
    color: #999;
  }
  .search{
    height: 0.9rem;
    padding: 0.1rem 0.25rem;
    background: #fff;
  }
  .search .search-input{
    float: left;
    background: #f5f5f5;
    color: #adadad;
    border-radius: 0.7rem;
    width: 6rem;
    line-height: 0.7rem;
    padding: 0rem 0.2rem;
    height: 0.7rem;
  }
  .search .search-input .icon{
    font-size: 0.34rem;
  }
</style>
